<template>
	<view class="detail">
		<view v-for="item in listArr" :key="item._id" v-if="flag">
			<view class="title">
				{{item.title}}
			</view>
			<view class="info">
				<text>{{item.author}}</text>
				<uni-dateformat :date="item.posttime" :threshold="[60000,3600000]" format="MM-dd"></uni-dateformat>
			</view>
			<!-- 图片渲染 点击图片可预览 -->
			<image v-for="(item1, index) in item.Image" :key="index" :src="item1" @click="preview(item1)"
				mode="aspectFill"></image>
			<q-previewImage ref="previewImage" :urls="item.Image" @onLongpress="onLongpress"></q-previewImage>
			<view class="content">
				{{item.content}}
			</view>
			<!-- 占位框 使删除修改按钮不会遮住内容 -->
			<view class="black"></view>
			<!-- 修改按钮 -->
			<view class="btnGroup">
				<button type="primary" @click="setData(item._id)">
					<uni-icons type="compose" size="20"></uni-icons>
				</button>
				<button type='warn' @click="onDelete(item._id)">
					<uni-icons type="trash" size="20"></uni-icons>
				</button>
			</view>
		</view>
		<view v-else>
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr: [],
				flag: false,
			}
		},
		onLoad(e) {
			this.getData(e)
		},
		methods: {
			//点击查看图片
			preview(url) {
				this.$nextTick(() => {
					this.$refs.previewImage[0].open(url)
				})
				this.$refs.previewImage[0].open(url);
			},
			//长按图片事件
			onLongpress(e) {
				console.log('当前长按的图片是' + e);
				uni.showActionSheet({
					itemList: ['转发给朋友', '保存到手机'],
					success: function(res) {
						if(res.tapIndex + 1==2){
							uni.downloadFile({
									url: e,
									success: (res) =>{
										if (res.statusCode === 200){
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail: function() {
													uni.showToast({
														title: "保存失败，请稍后重试",
														icon: "none"
													});
												}
											});
										}
									}
								})
						}
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//获取数据事件
			getData(id) {
				uniCloud.callFunction({
					name: 'setData',
					data: id
				}).then(res => {
					this.listArr = res.result.data
					this.flag = true
				})
			},
			//删除事件
			onDelete(e) {
				//删除弹窗
				uni.showModal({
					content: '是否确认删除？',
					success: res => {
						//返回值 confirm 为确定按钮 cancel 为取消按钮
						if (res.confirm) {
							uniCloud.callFunction({
								name: 'deleteData',
								data: {
									id: e
								}
							}).then(res => {
								uni.showToast({
									icon: 'success',
									title: '删除成功'
								})
								setTimeout(() => {
									//返回上一个页面
									uni.navigateBack({
										delta: 1
									});
								}, 800)
							}).catch(() => {
								uni.showToast({
									icon: 'error',
									title: '删除失败'
								})
							})
						}
					}
				})
			},
			//修改事件
			setData(e) {
				uni.navigateTo({
					url: '/pages/edit/edit?id=' + e
				})
			},
			// downloadImg(e) {
			// 	// wx.downloadFile 方法：下载图片到本地
			// 	wx.downloadFile({
			// 		url: e, //图片
			// 		success:(res)=>{
			// 			// wx.saveImageToPhotosAlbum 方法：保存图片到系统相册
			// 			wx.saveImageToPhotosAlbum({
			// 				filePath: res.tempFilePath, //图片文件路径	
			// 				success:(data)=>{
			// 					wx.hideLoading(); //隐藏 loading 提示框
			// 					wx.showModal({
			// 						title: '提示',
			// 						content: '保存成功',
			// 						modalType: false,
			// 					})
			// 				},
			// 				// 接口调用失败的回调函数
			// 				fail(err){

			// 				}
			// 			})
			// 		}
			// 	})
			// }

		},
		computed: {

		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		padding: 20rpx;

		.title {
			width: 100%;
			text-align: justify;
			font-size: 50rpx;
		}

		.info {
			font-size: 28rpx;
			color: #888;
			padding: 30rpx 0 60rpx;

			text {
				margin-right: 20rpx;
			}
		}

		.content {
			font-size: 36rpx;
			line-height: 1.4em;
		}

		.black {
			width: 100%;
			height: 100rpx;
		}

		.btnGroup {
			display: flex;
			width: 100%;
			box-sizing: border-box;
			bottom: 10rpx;
			right: 1rpx;

			button {
				width: 48%;
			}

			position: fixed;
		}

		image {
			width: 100%;
			display: block;
			margin-bottom: 20rpx;

		}
	}
</style>